<template>
  <div class="dokit-info-card">
    <div class="dokit-info-card-header">
      <div class="dokit-info-card-header__title">{{ title }}</div>
      <div class="dokit-info-card-header__opt">
        <div class="dokit-filter-box" :class="keyword ? 'dokit-filter-box-actived' : ''">
          <span class="dokit-filter-text">{{ keyword }}</span>
          <span class="dokit-filter dokit-opt-icon" @click="openPrompt"></span>
        </div>
        <span class="dokit-clear-all dokit-opt-icon" @click="clearAll"></span>
        <span class="dokit-refresh dokit-opt-icon" @click="refresh"></span>
      </div>
    </div>
    <div class="dokit-info-card-body">
      <table v-show="Object.keys(filteredMap).length">
        <tbody>
          <tr class="" v-for="(value, key) in filteredMap" :key="key">
            <td class="dokit-info-key">{{ key }}</td>
            <td class="dokit-info-value">{{ value }}</td>
            <td class="dokit-info-opt">
              <span class="dokit-info-delete" @click="removeItem(key)"></span>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="dokit-empty" v-show="Object.keys(filteredMap).length === 0">
        <span>empty</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      default: "",
    },
    infoMap: {
      default: {},
    },
  },
  data() {
    return {
      keyword: "",
    };
  },
  computed: {
    filteredMap() {
      if (this.keyword) {
        let map = Object.create({})
        for (const key in this.infoMap) {
          if (Object.hasOwnProperty.call(this.infoMap, key)) {
            if(this.infoMap[key].indexOf(this.keyword) > -1 || key.indexOf(this.keyword) > -1) {
              map[key] = this.infoMap[key]
            }
          }
        }
        return map
      } else {
        return this.infoMap
      }
      
    }
  },
  methods: {
    removeItem(key) {
      this.$emit("removeItem", key);
    },
    openPrompt() {
      this.keyword = window.prompt(
        "请输入过滤关键词",
        this.keyword ? this.keyword : ""
      );
    },
    clearAll() {
      if (window.confirm(`将清空所有${this.title}数据，是否确认清空？`)) {
        this.$emit("clear");
      }
    },
    refresh() {
      this.$emit("refresh");
    }
  },
};
</script>
<style lang="less">
.dokit-info-card {
  border-radius: 5px;
  background-color: #d9e1e8;
  overflow: hidden;
}

.dokit-info-card-header {
  border-bottom: 1px solid #eeeeee;
  background-color: #2b90d9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;

  .dokit-info-card-header__title {
    padding: 5px;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
  }
  .dokit-info-card-header__opt {
    display: flex;
    .dokit-opt-icon {
      display: inline-block;
      width: 15px;
      height: 15px;
      background-size: 15px;
      background-repeat: no-repeat;
      margin: 0 10px;
    }
    .dokit-refresh {
      background-image: url('');
    }
    .dokit-clear-all {
      background-image: url('');
    }
    .dokit-filter-box {
      padding-left: 10px;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      .dokit-filter-text {
        font-size: 12px;
      }
    }
    .dokit-filter-box-actived {
      border-radius: 10px;
      border: 1px solid #d9e1e8;
    }
    .dokit-filter {
      background-image: url('');
    }
  }
}
.dokit-info-card-body {
  table {
    width: 100%;
  }
  td {
    padding: 5px;
    font-size: 12px;
  }
  .dokit-empty{
    padding: 10px;
    text-align: center;
    line-height: 20px;
    color: #9baec8;
    font-weight: bold;
  }
  .dokit-info-key {
    font-weight: bolder;
    max-width: 150px;
    overflow-x: scroll;
  }
  .dokit-info-value {
  }
  .dokit-info-opt {
    width: 15px;
    span {
      display: inline-block;
      width: 15px;
      height: 15px;
      background-image: url("");
      background-size: 15px;
      background-repeat: no-repeat;
    }
  }
}
</style>